<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表处理</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div id="main">
        <ul>
            <li v-for="item in arr ">
                {{item}}
            </li>
            <!--v-for 直接写在要遍历的元素上，不写在父元素上--->
            <li v-for="(item,index) in arr " ><!---数组包含key-val vue都帮我们实现了 item 是元素，index是下标-->
                {{item}},{{index+1}}
            </li>

            <li v-for="item in obj">{{item}}</li> <!--输出val-->
            <li v-for="(item,key) in obj">{{item}},{{key}}</li> <!--输出val key-->
            <li v-for="(item,key,index) in obj">{{item}},{{key}},{{index}}</li> <!--输出val key index-->

            
            <li v-for="(item,key) in fuzaobj">
                <span v-if="key!='obj3'">{{item}}</span>
                <span v-else="key=='obj3'">
                     <span v-for="itm in item">{{itm}}</span>
                </span>
            </li>
            <!--输出val-->
        </ul>
    </div>
</body>
<script>
    //jquery $.get ,$.post  ajax 元素去写？？？？？
    let vue = new Vue({
        el: "#main",
        data: {
            arr: [60, 79, 80, 90],//数组没申明下标，以0 开头 arr 的下标 0，1，2，3
            obj:{
                obj1:'title',
                obj2:'body',
                //obj3:['php','java','js','python']
            },
            fuzaobj:{
                obj1:'title',
                obj2:'body',
                obj3:['php','java','js','python'],//要再次遍历怎么遍历?
            }
        }
    });
    //我们js 怎么遍历数组的？
    // for in
    

</script>

</html>